<template>
  <div class="slider-verify-box">
    <n-image v-show="imgBg != ''" :src="imgBg" preview-disabled :width="310" :height="155" />
    <n-image
      v-show="imgBlk != ''"
      :width="47"
      :height="47"
      :src="imgBlk"
      preview-disabled
      :style="{ position: 'absolute', left: x + 'px', top: y + 'px' }"
    />
    <n-button circle size="tiny" @click="reset" title="点击刷新">
      <template #icon>
        <n-icon size="18" :depth="4" :component="Reload" />
      </template>
    </n-button>
    <n-slider
      title="向右拖动使拼图完整"
      :max="263"
      :min="0"
      :tooltip="showTooltip"
      :show-tooltip="showTooltip"
      :format-tooltip="formatTooltip"
      v-model:value="x"
      :on-dragend="dragend"
      :on-dragstart="dragstart"
      :disabled="disabled"
    >
      <template #thumb>
        <n-icon-wrapper :size="24" :border-radius="12">
          <n-icon size="20" :component="ExtensionPuzzleOutline" />
        </n-icon-wrapper>
      </template>
    </n-slider>
  </div>
</template>

<script setup>
import { computed, ref, defineModel } from 'vue'
import { NSlider, NIcon, NButton, NIconWrapper, NImage } from 'naive-ui'
import { Reload, ExtensionPuzzleOutline } from '@vicons/ionicons5'
import request from '@/utils/request'

const id = defineModel('id')
const code = defineModel('code')
const x = ref(0)
const y = ref(0)
const imgBg = ref('')
const imgBlk = ref('')
const tip = ref('')
const disabled = ref(false)
const emits = defineEmits(['success'])
let startAt = 0

const showTooltip = computed(() => {
  return tip.value != ''
})

const dragstart = () => {
  tip.value = ''
  startAt = new Date().getTime()
}

const dragend = () => {
  disabled.value = true
  let spent = (new Date().getTime() - startAt) / 1000
  request({
    url: '/check',
    method: 'post',
    data: {
      id: id.value,
      x: x.value
    }
  }).then((res) => {
    let data = res?.data
    if (data && data?.code == 200) {
      tip.value = '验证通过，用时 ' + spent + ' 秒'
      code.value = data?.payload?.code
      setTimeout(() => {
        emits('success')
      }, 1250)
    } else {
      tip.value = data?.msg
      setTimeout(() => {
        reset()
      }, 1250)
    }
  })
}

const formatTooltip = () => {
  return tip.value
}

const load = async () => {
  disabled.value = true
  await request({
    url: '/get'
  }).then((res) => {
    let data = res?.data
    if (data && data?.code == 200) {
      imgBg.value = 'data:image/png;base64,' + data?.payload?.bg
      imgBlk.value = 'data:image/png;base64,' + data?.payload?.blk
      y.value = data?.payload?.y
      id.value = data?.payload?.id
    }
  })
  disabled.value = false
}

const reset = () => {
  imgBg.value = ''
  imgBlk.value = ''
  load()
  tip.value = ''
  x.value = 0
  id.value = ''
  code.value = ''
}

load()
</script>

<style scoped>
.slider-verify-box {
  position: relative;
  width: 310px;
  height: 180px;
}
.n-button {
  position: absolute;
  top: 2px;
  right: 2px;
}
.n-slider {
  position: absolute;
  top: 160px;
}
</style>
